<template>
	<!-- pages/chat/chat.wxml -->
	<view class="container">
		<!-- 消息列表区域 -->
		<scroll-view class="message-container" :scroll-y="true" :scroll-into-view="scrollToMessageId"
			:style="{'height':windowHeight}">
			<view class="message-list">
				<view class="itme">05-14 14:42</view>
				<view class="box">
					<view class="title">新成员通知</view>
					<view class="text">
						<text>郭依伦</text>加入<text>小赵</text>！快去欢迎新成员吧~
					</view>
					<view class="bottom">
						<text>详情</text>
						<uv-icon name="arrow-right" color="#7f8289" size="15"></uv-icon>
					</view>
				</view>
			</view>
			<view class="message-bottom" id="bottom">清空消息</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	const windowHeight = ref(0)
	const messageList = ref([])
	const inputValue = ref('')
	const scrollToMessageId = ref('bottom')
	onLoad(() => {
		let systemInfo = uni.getSystemInfoSync();
		windowHeight.value = systemInfo.windowHeight
	})
</script>

<style lang="scss" scoped>
	/* pages/chat/chat.wxss */
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

	.message-container {
		width: calc(100% - 60rpx);
		height: 100%;
		padding:0 30rpx;
		background-color: #ebecf5;
	}

	.message-list {
		width: 100%;
		.itme{
			width: 100%;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			color: #71747d;
		}
		.box{
			width: calc(100% - 40rpx);
			padding:20rpx;
			background: #fff;
			border-radius: 8px;
			.title{
				padding-bottom: 20rpx;
				font-size: 36rpx;
				font-weight: bold;
			}
			.text{
				font-size: 28rpx;
				color: #747474;
				text{
					color: #f00;
				}
				padding-bottom: 20rpx;
			}
			.bottom{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 20rpx;
				border-top: 1px solid #ebecf5;
				text{
					font-size: 28rpx;
					font-weight: bold;
				}
			}
		}
	}
	.message-bottom{
		width: 100%;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #999;
	}
</style>